<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style>
		@supports(-webkit-appearance: none) or (-moz-appearance: none) {
			input[type='checkbox'],
			input[type='radio'] {
				--active: #275EFE;
				--active-inner: #fff;
				--focus: 2px rgba(39, 94, 254, .3);
				--border: #BBC1E1;
				--border-hover: #275EFE;
				--background: #fff;
				--disabled: #F6F8FF;
				--disabled-inner: #E1E6F9;
				-webkit-appearance: none;
				-moz-appearance: none;
				height: 21px;
				outline: none;
				display: inline-block;
				vertical-align: top;
				position: relative;
				margin: 0;
				cursor: pointer;
				border: 1px solid var(--bc, var(--border));
				background: var(--b, var(--background));
				transition: background .3s, border-color .3s, box-shadow .2s;
				&:after {
					content: '';
					display: block;
					left: 0;
					top: 0;
					position: absolute;
					transition: transform var(--d-t, .3s) var(--d-t-e, ease), opacity var(--d-o, .2s);
				}
				&:checked {
					--b: var(--active);
					--bc: var(--active);
					--d-o: .3s;
					--d-t: .6s;
					--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
				}
				&:disabled {
					--b: var(--disabled);
					cursor: not-allowed;
					opacity: .9;
					&:checked {
						--b: var(--disabled-inner);
						--bc: var(--border);
					}
					& + label {
						cursor: not-allowed;
					}
				}
				&:hover {
					&:not(:checked) {
						&:not(:disabled) {
							--bc: var(--border-hover);
						}
					}
				}
				&:focus {
					box-shadow: 0 0 0 var(--focus);
				}
				&:not(.switch) {
					width: 21px;
					&:after {
						opacity: var(--o, 0);
					}
					&:checked {
						--o: 1;
					}
				}
				& + label {
					font-size: 14px;
					line-height: 21px;
					display: inline-block;
					vertical-align: top;
					cursor: pointer;
					margin-left: 4px;
				}
			}
			input[type='checkbox'] {
				&:not(.switch) {
					border-radius: 7px;
					&:after {
						width: 5px;
						height: 9px;
						border: 2px solid var(--active-inner);
						border-top: 0;
						border-left: 0;
						left: 7px;
						top: 4px;
						transform: rotate(var(--r, 20deg));
					}
					&:checked {
						--r: 43deg;
					}
				}
				&.switch {
					width: 38px;
					border-radius: 11px;
					&:after {
						left: 2px;
						top: 2px;
						border-radius: 50%;
						width: 15px;
						height: 15px;
						background: var(--ab, var(--border));
						transform: translateX(var(--x, 0));
					}
					&:checked {
						--ab: var(--active-inner);
						--x: 17px;
					}
					&:disabled {
						&:not(:checked) {
							&:after {
								opacity: .6;
							}
						}
					}
				}
			}
			input[type='radio'] {
				border-radius: 50%;
				&:after {
					width: 19px;
					height: 19px;
					border-radius: 50%;
					background: var(--active-inner);
					opacity: 0;
					transform: scale(var(--s, .7));
				}
				&:checked {
					--s: .5;
				}
			}
		}

		// Demo

		ul {
			margin: 12px;
			padding: 0;
			list-style: none;
			width: 100%;
			max-width: 320px;
			li {
				margin: 16px 0;
				position: relative;
			}
		}

		html {
			box-sizing: border-box;
		}

		* {
			box-sizing: inherit;
			&:before,
			&:after {
				box-sizing: inherit;
			}
		}

		// Center & dribbble
		   body {
			   min-height: 100vh;
			   font-family: 'Inter', Arial, sans-serif;
			   color: #8A91B4;
			   display: flex;
			   justify-content: center;
			   align-items: center;
			   background: #F6F8FF;
			   @media(max-width: 800px) {
				   padding: 20px;
			   }
		   }
	</style>
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

</head>
<body>
<ul>
	<li>
		<input id="c1" type="checkbox">
		<label for="c1">Checkbox</label>
	</li>
	<li>
		<input id="c2" type="checkbox" checked>
		<label for="c2">Checkbox</label>
	</li>
	<li>
		<input id="r1" type="radio" name="radio" value="1">
		<label for="r1">Radio</label>
	</li>
	<li>
		<input id="r2" type="radio" name="radio" value="2" checked>
		<label for="r2">Radio</label>
	</li>
	<li>
		<input id="s1" type="checkbox" class="switch">
		<label for="s1">Switch</label>
	</li>
	<li>
		<input id="s2" type="checkbox" class="switch" checked>
		<label for="s2">Switch</label>
	</li>
</ul>

<ul>
	<li>
		<input id="c1d" type="checkbox" disabled>
		<label for="c1d">Checkbox</label>
	</li>
	<li>
		<input id="c2d" type="checkbox" checked disabled>
		<label for="c2d">Checkbox</label>
	</li>
	<li>
		<input id="r1d" type="radio" name="radiod" value="1" disabled>
		<label for="r1d">Radio</label>
	</li>
	<li>
		<input id="r2d" type="radio" name="radiod" value="2" checked disabled>
		<label for="r2d">Radio</label>
	</li>
	<li>
		<input id="s1d" type="checkbox" class="switch" disabled>
		<label for="s1d">Switch</label>
	</li>
	<li>
		<input id="s2d" type="checkbox" class="switch" checked disabled>
		<label for="s2d">Switch</label>
	</li>
</ul>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script>

</script>
</body>
</html>